<template>
	<div class="box" :style="{ backgroundImage: `url(${loginbc})` }">
		<div class="login_head" style="float:left;">
			<div class="login">
				<el-link class="login_span1" @click="onLoginByPhone()">手机号登录</el-link>
				丨
				<el-link class="login_span2" @click="onLoginByUser()">账号登录</el-link>
				丨
				<el-link class="login_span3" @click="onLoginByMail()">邮箱登录</el-link>
			</div>
			<!-- 手机号登录 -->
			<el-form :model="loginForm" :rules="rules" ref="loginFormByPhone" label-width="50px" class="content" v-show="loginPhone">
				<el-form-item  prop="phone">
					<el-input placeholder="您的手机号" v-model="loginForm.phone" clearable  class="login_input" style="width:80%"></el-input>
				</el-form-item>
				<el-form-item  prop="code">
					<el-input placeholder="输入验证码" v-model="loginForm.code" clearable  class="login_input1" style="width:46%"></el-input>
					<el-button class="login_button" :class="{disabled: !this.canClick}" style="margin-left:14px" @click="countDown('loginFormByPhone')">{{content}}</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" plain style="width:80%" @click="Login_now('loginFormByPhone')">立即登录</el-button>
					<el-button style="margin-top:20px;width:80%;margin-left:0px" @click="immediately_register()">立即注册</el-button>
				</el-form-item>
			</el-form>
			<!-- 账号密码登录 -->
			<el-form :model="loginForm" :rules="rules" ref="loginFormByUser" label-width="50px" class="content" v-show="loginUser">
				<el-form-item  prop="loginName">
					<el-input placeholder="账号" v-model="loginForm.loginName" clearable  class="login_input" style="width:80%"></el-input>
				</el-form-item>
				<el-form-item  prop="password">
					<el-input type="password" placeholder="密码" v-model="loginForm.password" clearable  class="login_input1" style="width:80%"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" plain style="width:80%" @click="LoginByUser('loginFormByUser')">立即登录</el-button>
					<el-button style="margin-top:20px;width:80%;margin-left:0px" @click="immediately_register()">立即注册</el-button>
				</el-form-item>
			</el-form>
			<!-- 邮箱登录 -->
			<el-form :model="loginForm" :rules="rules" ref="loginFormByMail" label-width="50px" class="content" v-show="loginMail">
				<el-form-item  prop="mail">
					<el-input placeholder="您的邮箱号" v-model="loginForm.mail" clearable  class="login_input" style="width:80%"></el-input>
				</el-form-item>
				<el-form-item  prop="code">
					<el-input placeholder="输入验证码" v-model="loginForm.code" clearable  class="login_input1" style="width:46%"></el-input>
					<el-button class="login_button" :class="{disabled: !this.canClick}" style="margin-left:14px" @click="countDownMailCode('loginFormByMail')">{{content}}</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" plain style="width:80%" @click="LoginByMail('loginFormByMail')">立即登录</el-button>
					<el-button style="margin-top:20px;width:80%;margin-left:0px" @click="immediately_register()">立即注册</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="login_head1" style="float:left;width:300px;height:430px;" :style="{ backgroundImage: `url(${login})` }">
			<img src="@/assets/易游小logo.png" alt="" style="margin-top:25%;margin-left:17%">
			<p class="link" style="font-size:15px;margin-left:36%;color:black">想旅游,选易游</p>
			<p class="link" style="font-size:15px;margin-left:26%;margin-top:10px;color:black">下载易游app,旅游无烦恼</p>
		</div>
	</div>
</template>

<script>
import login from '@/assets/ChMkLGJ4c1aIDrEAAFSdL28IjOYAADMnwAAAAAAVJ1H047.jpg'
import loginbc from '@/assets/ChMkLGJ4c1aIDrEAAFSdL28IjOYAADMnwAAAAAAVJ1H047.jpg'
export default {
	name: 'loginViews',
	data () {
		return {
			// 邮箱登录 表单状态
			loginMail: false,
			// 账号登录 表单状态
			loginUser: false,
			// 手机号登录 表单状态
			loginPhone: true,
			canClick: true, //添加canClick
			totalTime: 120, //记录具体倒计时时间
			content: '发送验证',  // 按钮里显示的内容
			loginbc: loginbc, // 整个背景图片
			login: login, // login下的背景图片
			loginForm:{ // 输入框集合
				// 登录名
				loginName:'',
				// 密码
				password:'',
				// 手机号
				phone:'',
				// 验证码
				code:'',
				// 邮箱号
				mail: ''
			},
			// 校验规则
			rules: {
				phone: [
					{ required: true, message: '手机号不能为空', trigger: 'blur' },
					{
						pattern: /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/,
						message: '输入正确手机号',
						trigger: 'blur'
					}
				],
				code: [
					{ required: true, message: '请输入验证码', trigger: 'blur' },
				],
				loginName: [
					{ required: true, message: '请输入登录账号', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
				],
				mail: [
					{ required: true, message: '邮箱号不能为空', trigger: 'blur' },
					{
						pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/,
						message: '输入正确邮箱号',
						trigger: 'blur'
					}
				]
			},
		}
	},
	methods: {
		// 邮箱登录校验
		LoginByMail (loginForm) {
			this.$refs[loginForm].validate((valid) => {
				if (valid) {
					this.loginByQQCode()
				} else {
					return false;
				}
			})
		},
		// 邮箱登录
		loginByQQCode () {
			this.$axios.get('http://127.0.0.1:8082/login/loginByQQCode',{
				params: {
					mail: this.loginForm.mail,
					code: this.loginForm.code
				}
			}).then(res =>{
				if (res.data.flag === true) {
                    this.message('登录成功', 'success')
                    window.sessionStorage.setItem('token', res.data.obj.token)
                    window.sessionStorage.setItem('id', res.data.obj.user.id)
					window.sessionStorage.setItem('loginName', res.data.obj.user.loginName)
					window.sessionStorage.setItem('userName',res.data.obj.user.userName)
					window.sessionStorage.setItem('avatarId',res.data.obj.user.avatarId)
					this.$router.push({path: '/'})
					this.loginForm = { // 输入框集合
						// 登录名
						loginName:'',
						// 密码
						password:'',
						// 手机号
						phone:'',
						// 验证码
						code:'',
						// 邮箱号
						mail: ''
					}
				} else {
					this.message('验证码不正确', 'warning')
				}
			})
		},
		// 邮箱发送验证码
		sendCodeByQQMail () {
			this.$axios.get('http://127.0.0.1:8082/login/sendCodeByQQMail?mail=' + this.loginForm.mail)
			.then(res => {
				if (res.data.code === '999') {
					this.totalTime = 0
					this.message('邮箱未绑定', 'warning')
				}
			})
		},
		// 根据账号登录
		LoginByUser () {
			this.$axios.get('http://127.0.0.1:8082/login/loginByUser', {
				params:{
					loginName: this.loginForm.loginName,
					password: this.loginForm.password
				}
			}).then(res => {
				if (res.data.flag) {
                    this.message('登录成功', 'success')
                    window.sessionStorage.setItem('token', res.data.obj.token)
                    window.sessionStorage.setItem('id', res.data.obj.user.id)
					window.sessionStorage.setItem('loginName', res.data.obj.user.loginName)
					window.sessionStorage.setItem('userName',res.data.obj.user.userName)
					window.sessionStorage.setItem('avatarId',res.data.obj.user.avatarId)
					this.$router.push({path: '/'})
				} else {
					this.message('账号密码不正确', 'warning')
				}
			}).catch(error => {
				this.$message.error('服务器崩溃了，请稍后再尝试使用！');
			})
		},
		// 点击手机号登录触发方法
		onLoginByPhone () {
			this.loginPhone = true
			this.loginUser = false
			this.loginMail = false
		},
		// 点击邮箱登录触发方法
		onLoginByMail () {
			this.loginMail = true
			this.loginPhone = false
			this.loginUser = false
		},
		// 点击账号登录触发方法
		onLoginByUser () {
			this.loginUser = true
			this.loginPhone = false
			this.loginMail = false
		},
		// 标签页点击回调
		handleClick(tab, event) {
			console.log(tab, event);
		},
		loginByPhone () {
			this.$axios.get('http://127.0.0.1:8082/login/loginByPhone?phone=' + this.phone).then(res => {
				if (res.data.obj) {
                    this.message('登录成功', 'success')
				} else {
					this.message('添加失败', 'warning')
				}
			})
		},
		// 发送验证码
		sendCodeByPhone () {
			this.$axios.get('http://127.0.0.1:8082/login/sendCodeByPhone?phone=' + this.loginForm.phone).then(res => {
				
			})
		},
		immediately_register(){
			this.$router.replace('/Register')
		},
		// 点击发送验证码时倒计时
		countDown (loginForm) {
			this.$refs[loginForm].validateField("phone", (valid) => {
				if (valid === '') {
					this.sendCodeByPhone()
					if (!this.canClick) return  //改动的是这两行代码
						this.canClick = false
						this.content = this.totalTime + 's后重新发送'
						let clock = window.setInterval(() => {
						this.totalTime--
						this.content = this.totalTime + 's后重新发送'
					if (this.totalTime < 0) {
						window.clearInterval(clock)
						this.content = '重新发送验证码'
						this.totalTime = 120
						this.canClick = true  //这里重新开启
					}
					},1000)
				} else {
					return false;
				}
			})
		},
		// 点击发送验证码时倒计时(获取邮箱验证)
		countDownMailCode (loginForm) {
			this.$refs[loginForm].validateField('mail', (valid) => {
				if (valid === '') {
					this.sendCodeByQQMail()
					if (!this.canClick) return  //改动的是这两行代码
						this.canClick = false
						this.content = this.totalTime + 's后重新发送'
						let clock = window.setInterval(() => {
						this.totalTime--
						this.content = this.totalTime + 's后重新发送'
					if (this.totalTime < 0) {
						window.clearInterval(clock)
						this.content = '重新发送验证码'
						this.totalTime = 120
						this.canClick = true  //这里重新开启
					}
					},1000)
				} else {
					return false;
				}
			})
		},
		// 点击时触发校验
		Login_now (loginForm){
			this.$refs[loginForm].validate((valid) => {
				if (valid) {
					alert('submit!')
				} else {
					return false;
				}
			})
		},
        //消息提示框
        message(message,type){
            this.$message({
                message:message,
                type: type
            });
        },
	}
}
</script>


<style>
.login{
	width:330px;
	margin: 0 auto;
	margin-top: 70px;
	text-align: center;
}
.login .login_span1{
	position: relative;
	font-size: 18px;
	z-index: 10000000;
    cursor: pointer;
}
.login .login_span2{
	position: relative;
	font-size: 18px;
	z-index: 10000000;
    cursor: pointer;
}
.login .login_span3{
	position: relative;
	font-size: 18px;
	z-index: 10000000;
    cursor: pointer;
}
.box {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.login_head {
	background-color: rgb(255, 255, 255);
	width: 430px;
	height: 430px;
	margin-top: 230px;
	margin: 50 auto;
	margin-top: 50 auto;
	margin-left: 29%;
}
.login_head1 {
	background-color: rgb(41, 38, 78);
	width: 430px;
	height: 430px;
	margin: 0 auto;
	margin-right: auto;
	margin-top: 230px;
}
.content {
	width: 100%;
	height: 40%;
	margin: 0 auto;
	margin-top:-50px;
}
.login_input{
	margin-top: 100px;
}
.login_butto1{
	width: 70%;
}
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed;
}
</style>